<template>
	<view class="detail">
		<u-navbar :background="background" back-icon-color="#FFF" title-color="#fff" title-size="32" :border-bottom="false" :custom-back="customBack"></u-navbar>
		<view class="top-bg">
			<image class="top-bg-bottom" src="../../static/images/bg2@2x.png" mode=""></image>
			<!-- <image class="top-bg-bottom" src="../../static/images/bg9@2x.png" mode=""></image> -->
			<image class="top-bg-top" src="../../static/images/rice@2x.png" mode=""></image>
		</view>
		<view class="top_tabs u-skeleton-circle">
			<u-button :custom-style="{border:0, padding:'0',width:'100%',height:'100%',borderRadius: '50%',backgroundColor:'rgba(0,0,0,0)'}"
			 open-type="share" hover-class="none">
				<image src="../../static/images/icon_share.png" mode="widthFix"></image>
			</u-button>
		</view>
		<view class="detail-box" v-show="isShowDetail">
			<view class="info">
				<view class="u-flex u-flex-col u-row-center" style="position: relative;z-index: 4;">
					<view class="period">
						<image class="p-bg" src="../../static/images/bg6@2x.png" mode=""></image>
						<view class="period-num color-FFFFFF u-font-28">第{{collage_detail.stage}}期</view>
					</view>
					<view class="u-flex u-col-center u-row-around u-margin-top-40" style="width: 100%;">
						<view class="u-flex u-flex-col u-row-center">
							<view class="u-font-40 color-F5B340">123500</view>
							<view class="u-font-28 color-999999">时间结束成团</view>
							<!-- <view class="u-font-28 color-999999">幸运号码</view> -->
						</view>
						<view class="u-flex u-flex-col u-row-center">
							<view class="u-font-40 color-F5B340">{{collage_detail.current_num}}/{{collage_detail.limit_num}}</view>
							<view class="u-font-28 color-999999">参加人数</view>
						</view>
					</view>
				</view>
				<image class="info-bg" src="../../static/images/item_bg.jpg" mode=""></image>
			</view>
			<view class="detail-content u-margin-top-24">
				<scroll-view scroll-y="true" style="height: 100%;">
					<u-lazy-load v-for="(item, index) in collage_detail.album" :key="index" :image="item"></u-lazy-load>
				</scroll-view>
			</view>
			<view class="detail-bottom u-flex u-col-center u-row-between">
				<view class="u-flex u-col-center" style="border: 2rpx solid #F5B340;border-radius: 10rpx;">
					<u-button :custom-style="btnCustomStyle" hover-class="none" :hair-line="false" @click="lowerAmount">
						<u-icon name="minus" color="#999999" size="36"></u-icon>
					</u-button>
					<view class="bg-F5B340 color-FFFFFF u-font-36 u-flex u-col-center u-row-center" style="min-width: 100rpx;height: 70rpx;">
						<u-count-to :start-val="1" :end-val="amount" font-size="36" color="#FFF"></u-count-to>
					</view>
					<u-button :custom-style="btnCustomStyle" hover-class="none" :hair-line="false" @click="addAmount">
						<u-icon name="plus" color="#999999" size="36"></u-icon>
					</u-button>
				</view>
				<view class="u-flex u-col-center">
					<view class="">合计</view>
					<view class="u-margin-left-14 u-font-36 color-F75F53">￥{{total_price}}</view>
				</view>
				<u-button :custom-style="customStyle" hover-class="none" @click="collagesPartake">提交订单</u-button>
				<!-- <u-button :custom-style="{ width: '160rpx', height: '60rpx', background: 'rgba(204,204,204,1)', borderRadius: '20rpx' ,color:'#FFFFFF'}" hover-class="none" :hair-line="false">
					交易关闭
				</u-button> -->
			</view>
		</view>
	</view>
</template>

<script>
	let goods_id = ''
	export default {
		data() {
			return {
				background: {},
				collage_detail: {},
				isShowDetail: false,
				customStyle: {
					width: '160rpx',
					height: '60rpx',
					background: 'rgba(245,179,64,1)',
					borderRadius: '20rpx',
					color: '#FFFFFF'
				},
				btnCustomStyle: {
					width: '80rpx',
					height: '70rpx',
					background: '#fffff',
					border: '2rpx solid #FFFFFF'
				},
				total_price: 0,
				amount: 1
			};
		},
		onLoad(options) {
			console.log(options.goods_id)
			goods_id = options.goods_id
		},
		onShow() {
			this.detail()
		},
		methods: {
			lowerAmount() {
				if (this.amount === 1) {
					this.$u.toast('最少选择一份')
					return false
				}
				--this.amount
				this.total_price = this.amount * this.collage_detail.price
			},
			addAmount() {
				if (this.amount == (this.collage_detail.limit_num - this.collage_detail.current_num)) {
					this.$u.toast('最多选择' + (this.collage_detail.limit_num - this.collage_detail.current_num) + "份")
					return false
				}
				++this.amount
				this.total_price = this.amount * this.collage_detail.price
			},
			detail() {
				let params = {
					collage_id: goods_id
				}
				this.$u.api.getCollagesDetail(params).then(res => {
					if (res.errno === '000') {
						this.collage_detail = res.result.data
						this.total_price = res.result.data.price
						this.$u.mpShare.imageUrl = res.result.data.share_pic
						this.$u.mpShare.title = res.result.data.gname
						this.isShowDetail = true
						this.$u.mpShare.path = `/buychicken/goodsdetail/goodsdetail?goods_id=${goods_id}&member_id=${this.vuex_user.id}`
						// this.$u.mpShare.path =  res.result.data.gname
					}
				}).catch(err => {
					console.log(err)
				})
			},
			collagesPartake() {
				if(!this.vuex_token){
					this.$u.toast("请先登录")
					uni.navigateTo({
						url:"/pages/login/login"
					})
					return false;
				}
				let params = {
					collage_id: goods_id,
					num: this.amount,
					amount: this.total_price
				}
				this.$u.api.postCollagesPartake(params).then(res => {
					if (res.errno === '000') {
						uni.getProvider({
							service: 'payment',
							success: (payres) => {
								console.log(payres)
								//在这里进行业务逻辑处理
								if (payres.errMsg === "getProvider:ok" && payres.provider[0] === "wxpay") {
									//微信支付
									uni.requestPayment({
										provider: payres.provider[0],
										timeStamp: res.result.data.timeStamp, //订单数据
										nonceStr: res.result.data.nonceStr,
										package: res.result.data.package,
										signType: res.result.data.signType,
										paySign: res.result.data.paySign,
										success: (res) => {
											//处理业务逻辑
											uni.showToast({
												icon: 'none',
												title: '支付成功'
											});
											setTimeout(()=>{
												uni.navigateTo({
													url:"../paysuccess/paysuccess?collage_id="+goods_id
												})
											},500)
										},
										fail: (err) => {
											console.log('fail:' + JSON.stringify(err));
											uni.showToast({
												icon: 'none',
												title: '支付失败'
											});
											
										},
									})

								} else {
									this.$u.toast("调用支付失败")
								}
							}
						});

					}else{
						this.$u.toast(res.errmsg)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			customBack(){
				let pages = getCurrentPages()
				console.log(pages.length)
				if(pages.length === 1){
					uni.reLaunch({
						url:"/pages/index/index"
					})
				}else{
					uni.navigateBack({})
				}
			}
		},
		onUnload() {
			this.$u.mpShare.path = `/pages/index/index?member_id=${this.vuex_user.id}`
			this.$u.mpShare.title = this.vuex_share.title
			this.$u.mpShare.imageUrl = this.vuex_share.thumb_picture
		}
	};
</script>

<style>
	.detail {
		background: rgb(241, 245, 246);
		position: absolute;
		width: 100vw;
		height: 100vh;
		top: 0;
	}

	.top-bg {
		position: absolute;
		top: 0;
		width: 100%;
	}

	.top-bg-bottom {
		width: 100%;
		height: 574rpx;
	}

	.top-bg-top {
		position: absolute;
		z-index: 2;
		top: 142rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 385rpx;
		height: 317rpx;
	}

	.detail-box {
		position: relative;
		z-index: 4;
		top: 350rpx;
	}

	.info {
		width: 708rpx;
		height: 206rpx;
		position: relative;
		margin: 0 auto;
	}

	.info-bg {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.period {
		display: inline-block;
		position: relative;
		padding: 0 64rpx;
		top: -4rpx;
	}

	.period-num {
		position: relative;
		z-index: 2;
	}

	.p-bg {
		position: absolute;
		width: 100%;
		height: 40rpx;
		left: 0;
		top: 0;
	}

	.detail-content {
		width: 700rpx;
		height: 40vh;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		margin: 0 auto;
	}

	.detail-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 150rpx;
		background: rgba(255, 255, 255, 1);
		padding: 0 18rpx 0 26rpx;
	}
	.top_tabs {
		position: fixed;
		right: 20rpx;
		top: 200rpx;
		width: 116rpx;
		height: 116rpx;
		margin-bottom: 26rpx;
	}
	
	.top_tabs image {
		width: 100%;
		height: 100%;
		display: flex;
	}
</style>
